<!-- 用户列表 -->

<!-- 项目管理 -->
<template>
  <div class="page-box h100 display-flex czbj">
    <p class="title-label mb10">用户列表</p>
    <!-- sonRouter="yybureauFormationBJ" 为跳转新的页面编辑 -->
    <dxtable
      :dataJson="dataJson"
      :portUrl="portUrl"
      :formJson="formJson"
      :qx="qx"
      ref="databale"
      :czFun="czFun"
    ></dxtable>

    <n-modal v-model:show="showModal" preset="card" class="xcrfet-diagnosis">
      <template #header>
        <div>余额充值</div>
      </template>
      <div class="display-flex">
        <div class="flex-1">
          <n-input-number
            v-model:value="czxfdgrt"
            type="text"
            placeholder="请输入充值金额"
          />
        </div>
      </div>
      <template #action>
        <div class="tr">
          <n-button @click="showModal = false"> 关闭 </n-button>
          <n-button type="primary" class="ml20" @click="imxcer">
            确认充值
          </n-button>
        </div>
      </template>
    </n-modal>
  </div>
</template>
<script lang="ts" setup>
import dxtable from "../../components/util/dxtable.vue";
import sort from "../../components/util/sort.vue";
import { dxget, dxpost } from "../../util/index";
import { NButton, NImage, NTag } from "naive-ui";
import { h, ref, reactive } from "vue";
const showModal = ref(false);
const databale = ref();
const czxfdgrt = ref(null);
const xkdrrt = ref(null);
const initeer = () => {
  databale.value.initDataExpose();
};
let dataJson = [
  {
    title: "头像",
    type: "img",
    val: "",
    icon: "dx-img",
    span: 12,
    key: "userImg",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "昵称",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "userName",
    width: "",
    search: true,
    istable: true,
    required: false,
  },
  {
    title: "手机号码",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "phone",
    width: "",
    search: true,
    istable: true,
    required: false,
  },
  {
    title: "微信号码",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "weixin",
    width: "",
    search: true,
    istable: true,
    required: false,
  },
  {
    title: "密码",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "password",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "余额",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "yuer",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "排序",
    width: 100,
    render: (row) => {
      row.sjk = "xtgx"; //数据库
      row.databaseName = "keyEnterprise"; //表名
      return h(sort, {
        row,
        onCallBack: () => {
          initeer();
        },
      });
    },
  },
  {
    title: "添加时间",
    key: "addTime",
    width: 150,
  },
];

const qx = {
  DeletePermissionID: "guserListdel", //删除
  EditPermissionIdentifier: "guserListbj", // 编辑
  NewPermissionIdentifier: "guserListxz", // 新建
  ViewPermissionID: "guserListck", // 查看
};
const portUrl = "gudrYun/userList";

let formJson = reactive([
  {
    title: "头像",
    type: "img",
    val: "",
    icon: "dx-img",
    span: 12,
    key: "userImg",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "昵称",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 24,
    key: "userName",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "手机号码",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "phone",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "微信号码",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "weixin",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
  {
    title: "密码",
    type: "input",
    val: "",
    icon: "dx-shurukuang",
    span: 12,
    key: "password",
    width: "",
    search: false,
    istable: true,
    required: false,
  },
]);
const czFun = {
  fun: (row) => {
    return [
      h(
        NButton,
        {
          type: "info",
          quaternary: true,
          onClick: async (e) => {
            showModal.value = true;
            xkdrrt.value = row;
          },
        },
        "充值"
      ),
    ];
  },
};

const imxcer = async () => {
  if (!czxfdgrt.value) {
    window.$message.error("请输入充值金额");
    return;
  }
  await dxpost("gudrYun/api/chongzhisd", {
    name: "管理员充值",
    beizhu: czxfdgrt.value,
    uid: xkdrrt.value.id,
  });
  xkdrrt.value = null;
  showModal.value = false;
  czxfdgrt.value = "";
  initeer();
};

// 获取字典内容
// const xtgxxmfl = async () => {
//   const { data }: any = await dxget("dxgjAdmin/getzd", { name: 'xtgxxmfl' })
//   dataJson[2].options = [
//     {
//       label: "全部",
//       value: ""
//     },
//     ...data
//   ]
//   formJson[2].options = data
//   xmlxSelect.value = data
//   console.log(data);
// }
// xtgxxmfl()
</script>
<style scoped></style>
